<template>
	<view>
		<view class="PageConllect">
			<view>
				<view class="userView">
					<u-swipe-action :show="item.show" :index="index"
								v-for="(item, index) in userList" :key="item.id" 
								@click="click" @open="open"
								:options="options">
						<view class="UserData" :class="[item.gender == '男' ? 'boy' : 'girl']">
							<!-- 照片层 -->
							<view class="userImg">
								<image mode="aspectFill" class="userImg" :src="item.advertisingImg"></image>
							</view>
							<!-- 文字层 -->
							<view>
								<!-- 个人信息 -->
								<view class="briefly">
									<view style="text-align: center;" :class="[item.gender == '男' ? 'boyMoney':'girlMoney']">
										{{item.name}}
									</view>
									<view style="font-size: 15px;width: 4rem;text-align: center;margin-top: 5px;"
										:class="[item.gender == '男' ? 'boyMoney':'girlMoney']">{{item.age}}</view>
								</view>
								<!-- 简介 -->
								<view class="userbriefly">
									<p class="userbriefly">{{item.briefly}}</p>
								</view>
								<!-- 标签 -->
								<view class="tag-user">
									<view class="tag">
										<u-tag color="white" bg-color="#FF7F50" border-color="#FF7F50" :text="item.list[0]" type="success"></u-tag>
									</view>
									<view class="tag">
										<u-tag color="white" bg-color="#FF7F50" border-color="#FF7F50" :text="item.list[1]" type="success"></u-tag>
									</view>
								</view>
								<!-- 金额数目 -->
								<view class="boxWarp">
									<view class="boxWarpMoney" :class="[item.gender == '男' ? 'boyMoney':'girlMoney']">
										{{item.money+"币/小时"}}
									</view>
								</view>
							</view>
						</view>
				</u-swipe-action>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList: [{
					name: "彭于晏",
					age: "18岁",
					briefly: "这个人很懒,什么都没留下",
					list: ["吃喝玩乐", "王者荣耀", "密室逃脱"],
					money: "188",
					gender: "男",
					advertisingImg: "/static/image/swiper/swiper2.png",
					id: 1,
					show:false
				}, {
					name: "琪琪",
					age: "18岁",
					briefly: "这个人很懒,什么都没留下",
					list: ["吃喝玩乐", "剧本杀", "密室逃脱"],
					money: "188",
					gender: "女",
					advertisingImg: "/static/image/swiper/swiper1.png",
					id: 2,
					show:false
				}, {
					name: "琪琪",
					age: "18岁",
					briefly: "这个人很懒,什么都没留下",
					list: ["吃喝玩乐", "和平精英", "密室逃脱"],
					money: "188",
					gender: "男",
					advertisingImg: "/static/image/swiper/swiper1.png",
					id: 3,
					show:false
				}],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			}
		},
		methods: {
			click(index, index1) {
					if(index1 == 1) {
						this.list.splice(index, 1);
						this.$u.toast(`删除了第${index}个cell`);
					} else {
						this.list[index].show = false;
						this.$u.toast(`收藏成功`);
					}
				},
			open(index) {
				this.userList[index].show = true;
			}
		}
	}
</script>

<style>
	.imgSrc{
		margin-left: 20px;
		width: 50rpx;
		height: 50rpx;
	}
	.PageConllect{
		margin: 20rpx;
	}
	.userView {
		border-radius: 20px;
		margin-top: 20px;
	}
	
	// 变色层
	.boy {
		background: linear-gradient(white, #6CC7E2);
	}
	
	.girl {
		background: linear-gradient(white, #EFA7D2);
	}
	
	// 金额色彩
	.boyMoney {
		color: #09B6EA;
	}
	
	.girlMoney {
		color: #FF1493;
	}
	
	.boxWarpMoney {
		font-size: 1rem;
		margin-top: 10px;
		text-align: left;
		margin-left: 20px;
	}
	
	.tag {
		margin-left: 8px;
		margin-top: 5px;
	}
	
	.tag-user {
		display: flex;
		flex-wrap: wrap;
	}
	
	.advertising {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.advertisingImg {
		margin-top: 2rem;
		height: 5rem;
	}
	
	.font-home {
		font-size: 1.1rem;
		margin: 1rem;
		font-weight: 900;
	}
	
	.UserData {
		border-radius: 20px;
		margin: 10rpx;
		display: flex;
		height: 130px;
	}
	
	.userImg {
		border-radius: 20px;
		height: 20px;
		width: 9rem;
		height: 130px;
	}
	
	.briefly {
		display: flex;
		font-size: 40rpx;
		flex-direction: row;
		margin: 0.5rem;
		color: #FF1493;
	}
	
	.userbriefly {
		margin: 0.2rem;
		font-size: 12px;
	}
</style>
